<template>
  <div id="app">
	<div id="content">
		<div id="login">
		<el-button id="radio2" type="text" v-if="islogin" @click="LogoutRule">退出</el-button>
		<el-button id="radio1" type="text" v-if="islogin">{{ UserName }}</el-button>
		<el-button id="radio1" type="text" v-if="!islogin" @click="showDialogFormVisible">登陆</el-button>
		<el-dialog :title="isRegister === false ? '登录' : '注册'" :visible.sync="dialogFormVisible">
			<el-form :model="form">
				<el-form-item prop="userID">
					<el-input v-model="form.userID" placeholder="请输入用户名" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item prop="password">
					<el-input v-model="form.password" placeholder="请输入密码" auto-complete="off" show-password></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="LoginOrRegisterClick" class="confirmBtn">{{ isRegister === false ? '登录' : '注册' }}</el-button>
				</el-form-item>
				<el-button type="text" @click="isRegister = !isRegister">{{ isRegister === true ? '登录' : '注册' }}</el-button>
			</el-form>
			
		</el-dialog>
		</div>
		<div class="title" @click="showSearch = !showSearch">学术词库</div>
		<el-row :gutter="40" class="search">
			<el-col :span="21">
				<el-input placeholder="输入需要查询的单词" v-model="preInputWord" @keyup.enter.native="search"></el-input>
			</el-col>
			<el-col :span="3">
				<el-button @click="search">搜索</el-button>
			</el-col>
		</el-row>
		<div v-if="showSearch">
			<el-tabs v-model="activeName" :before-leave="beforeLeave" @tab-click="handleClick">
				<el-tab-pane label="相关解释" name="explain"></el-tab-pane>
				<el-tab-pane label="权威词汇" name="article"></el-tab-pane>
				<el-tab-pane label="我要添加" name="add"></el-tab-pane>
			</el-tabs>
			<router-view></router-view>
		</div>
		<div v-if="!showSearch">
			<el-tabs class="tabs-margin-top"  v-model="displayContent" :before-leave="beforeLeave2" @tab-click="selectContent" :stretch=true>
				<el-tab-pane label="词库分类" name="classify"></el-tab-pane>
				<el-tab-pane label="热点领域" name="hot"></el-tab-pane>
				<el-tab-pane label="我的词库" name="mine"></el-tab-pane>
				<el-tab-pane label="我要添加" name="update"></el-tab-pane>
			</el-tabs>
			<classify v-if="displayContent == 'classify'"></classify>
			
			<div id="myevent"><hot v-if="displayContent == 'hot'" v-on:showSearch="changeIt"></hot></div>
			<!-- props 父子组件传值，子组件变量名加 “：”符合表示需要变量转义，如果直接传字符串不需要加 ： -->
			<myThesaurus v-if="displayContent == 'mine'"></myThesaurus>
			<update v-if="displayContent == 'update'" ></update>
		</div>
		<div class="footer"></div>
	</div>
  </div>
</template>

<script>
import classify from './components/Classify.vue'
import hot from './components/Hot.vue'
import myThesaurus from './components/myThesaurus.vue'
import update from './components/Update.vue'
import common from './components/Common.vue'
import {setCookie,getCookie} from './js/cookieUtil'
import { _isMobile } from './js/common.js'
export default {
  name: 'app',
  components: {
    classify: classify,
	hot: hot,
	myThesaurus: myThesaurus,
	update: update
  },
  data() {
	return {
		activeName: 'explain',
		preInputWord: '',
		inputWord: '',
		displayContent: 'classify',
		testStr: "热点新闻",
		islogin:true,
		isRegister: false,
		UserName: common.userName,
		dialogFormVisible:false,
		form: {
			username: '',
			password: ''
		},
		showSearch: false,
		isMobile: false
	};
  },
  methods: {
	isLogin(){
		console.log("isLogin   ..")
		if(common.userName == ''){
			this.dialogFormVisible = true
		}
	},
	LoginOrRegisterClick(){
		// this.$message(this.form.userID);
		if(!this.isRegister){
			this.$axios
				.post('api/LoginForm',{
				userID:this.form.userID,
				password:this.form.password
			})
			.then(successRespond => {
				if(successRespond.data.code===200){
					this.$message('登陆成功')
					this.UserName=this.form.userID
					this.islogin=!this.islogin
					this.dialogFormVisible=false
					setCookie('username',this.UserName)
					setCookie('islogin','true')
					this.UserName=successRespond.data
					common.userName = this.UserName
					// this.logout=!this.logout
					// this.login=!this.login
					// this.dialogFormVisible=false
				}
				else{
					this.$message('登陆失败')
				}
			})
			.catch(failRespond => {
				this.$message('登陆失败')
			})
		}
		else {
			this.$axios
				.post('api/RegisterForm',{
				userID:this.form.userID,
				password:this.form.password
			})
			.then(successRespond => {
				if(successRespond.data.code===200){
					this.$message('注册成功')
					this.UserName=successRespond.data
					common.userName = this.UserName
					// this.logout=!this.logout
					// this.login=!this.login
					// this.dialogFormVisible=false
				}
				else{
					this.$message('注册失败')
				}
			})
			.catch(failRespond => {
				this.$message('注册失败')
			})

		}
	},
	showDialogFormVisible() {
		if(getCookie('islogin')!='--'){
			this.$message('登陆成功')
			this.UserName=getCookie('username')
			this.logout=!this.logout
			this.login=!this.login
			this.islogin=true
			

		}else{
			//this.form.userID=getCookie('username')
			this.dialogFormVisible = true
		}
		
	},
	LogoutRule(){
		this.userID=''
		this.UserName=''
		this.islogin=!this.islogin
		setCookie('islogin','--')
	},
	changeIt(){
		
		this.showSearch=true

	},
	beforeLeave(newName, oldName){
		if(newName == 'add' && common.userName === ''){
			this.activeName = oldName
			var that = this;
			this.$router.push({name:this.activeName,query:{inputWord: this.inputWord}});
			setTimeout(function()
			{
				that.dialogFormVisible = true
			}, 500);
			return false
		}
		return true
	},
	beforeLeave2(newName, oldName){
		if((newName == 'update' || newName == 'mine')&&common.userName === ''){
			this.displayContent = oldName
			// page = 'explain'
			var that = this;
			setTimeout(function()
			{
				that.dialogFormVisible = true
			}, 500);
			return false
		}
		return true
	},
	handleClick(tab, event) {
		var page = this.activeName;
		this.$router.push({name:page,query:{inputWord: this.inputWord}});
	},
	selectContent(tab,event) {
		if(this.displayContent == "update") {
			this.preInputWord = '';
			this.displayContent="classify";
			this.showSearch = !this.showSearch;
			this.activeName = 'add'
			this.$router.push({name:"add", query:{
				inputWord: '',
				}});
		}
	},
	search() {
		this.showSearch = true
		this.activeName = 'explain'
		this.inputWord = this.preInputWord
		this.$router.push({name:'explain', query:{ 
			inputWord: this.inputWord ,
			}});
	},
	updateActiveName(){
		var name = this.$route.name
		if(name != undefined && common.userName !='') {
			this.activeName = name
		}
		else {
			this.activeName = 'explain'
		}
	},
  },
  mounted() {
	this.updateActiveName()
	this.isMobile = _isMobile()
  },
  watch:{
	  '$route': 'updateActiveName'
  }
  // init(); monut)();
}
</script>

<style lang="less">

#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: flex;
  justify-content:center;
  /* align-items: center; */
}
#content {
	text-align: center;
	color: #2c3e50;
	margin-top: 60px;
	width: 1000px;
	@media screen and(max-width: 500px) {
		
		width: 100%;
		
	}
}
.confirmBtn {
	width: 100%;
}
.search {
	display: flex;
	margin: 20px 0;
	.input {
		
	}
}
#login {
	width: 100%;
	#radio1{
		float: right;
	}
	#radio2{
		float: right;
	}
}

.title {
	font-size: 36px;
	color: royalblue;
	font-weight: 800;
}
.voice {
	text-align: left;
}
.footer {
	width: 100%;
	height: 200px;
}
.tabs-margin-top {
	margin-top: 20px;
}
.demonstration {
	    text-align: center;
		margin-top: 15px;
	  	width: 100%;
	  }
</style>
